<template>
  <div>
    <h1>新建员工</h1>
    <el-form
      :model="ruleForm2"
      status-icon
      :rules="rules2"
      ref="ruleForm2"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="员工姓名" prop="staffName" :hide-required-asterisk="true">
        <el-input type="text" v-model="ruleForm2.staffName" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="上传照片">
        <portrait @imgUrl="getUrl"></portrait>
      </el-form-item>
      <el-form-item label="创建人">
        <el-input type="text" v-model="ruleForm2.createName" placeholder="请输入创建人"></el-input>
      </el-form-item>
      <el-form-item label="性别" class="sex">
        <el-radio-group v-model="ruleForm2.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="出生日期">
        <el-date-picker v-model="ruleForm2.chusheng" placeholder="出生日期" @blur="changeTime"></el-date-picker>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input type="text" v-model="ruleForm2.phone" placeholder="请输入11位手机号"></el-input>
      </el-form-item>

      <el-form-item label="入职日期" prop="ruzhi">
        <el-date-picker v-model="ruleForm2.ruzhi" placeholder="选择入职日期"></el-date-picker>
      </el-form-item>

      <el-form-item label="岗位" prop="gangwei">
        <el-cascader
          placeholder="选择岗位"
          v-model="ruleForm2.gangwei"
          :options="gangweiList"
          expand-trigger="hover"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="ruleForm2.status" placeholder="请选择">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄(周岁)" prop="age">
        <el-input v-model.number="ruleForm2.age" placeholder="请输入年龄" disabled></el-input>
      </el-form-item>
      <el-form-item label="最高学历">
        <el-select v-model="ruleForm2.xueli" placeholder="请选择">
          <el-option
            v-for="item in xueliList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="籍贯" prop="jiguan">
        <el-cascader
          placeholder="可输入地区名字搜索"
          v-model="ruleForm2.jiguan"
          :options="city"
          filterable
          expand-trigger="hover"
          ref="jiguanbox"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="政治面貌">
        <el-select v-model="ruleForm2.zhengzhimianmao" placeholder="请选择">
          <el-option
            v-for="item in zhengzhimianmaoList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="现住址" prop="huji">
        <el-cascader
          placeholder="可输入地区名字搜索"
          v-model="ruleForm2.huji"
          :options="city"
          filterable
          expand-trigger="hover"
          ref="hujibox"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="详细地址">
        <el-input type="text" v-model="ruleForm2.zhuzhi" placeholder="请输入详细地址"></el-input>
      </el-form-item>

      <el-form-item label="血型">
        <el-select v-model="ruleForm2.xuexing" placeholder="请选择">
          <el-option
            v-for="item in xuexingList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="星座">
        <el-select v-model="ruleForm2.xingzuo" placeholder="请选择">
          <el-option
            v-for="item in xingzuoLsit"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="健康状况">
        <el-select v-model="ruleForm2.jiankangzhuangkuang" placeholder="请选择">
          <el-option
            v-for="item in jiankangzhuangkuangLsit"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="住房">
        <el-select v-model="ruleForm2.zhufang" placeholder="请选择">
          <el-option
            v-for="item in zhufangList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="民族">
        <el-select v-model="ruleForm2.minzu" placeholder="请选择" filterable>
          <el-option
            v-for="item in minzuList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="婚育">
        <el-select v-model="ruleForm2.hunyu" placeholder="请选择">
          <el-option
            v-for="item in hunyuList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="驾照">
        <el-select v-model="ruleForm2.jiazhao" placeholder="请选择">
          <el-option
            v-for="item in jiazhaoList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="退伍证">
        <el-select v-model="ruleForm2.tuiwuzheng" placeholder="请选择">
          <el-option
            v-for="item in tuiwuzhengList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="护照">
        <el-select v-model="ruleForm2.huzhao" placeholder="请选择">
          <el-option
            v-for="item in tuiwuzhengList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="疾病史" prop="bingli">
        <el-input type="text" v-model="ruleForm2.bingli"></el-input>
      </el-form-item>
      <el-form-item label="身高(CM)" prop="height">
        <el-input type="text" v-model="ruleForm2.height"></el-input>
      </el-form-item>
      <el-form-item label="体重(KG)" prop="weight">
        <el-input type="text" v-model="ruleForm2.weight"></el-input>
      </el-form-item>
      <el-form-item label="毕业院校" prop="xuexing">
        <el-input type="text" v-model="ruleForm2.biyeyuanxiao"></el-input>
      </el-form-item>
      <el-form-item label="所学专业" prop="zhuanye">
        <el-input type="text" v-model="ruleForm2.zhuanye"></el-input>
      </el-form-item>
      <el-form-item label="特长" prop="techang">
        <el-input type="text" v-model="ruleForm2.techang"></el-input>
      </el-form-item>
      <el-form-item label="爱好" prop="aihao">
        <el-input type="text" v-model="ruleForm2.aihao"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="shenfenzheng">
        <el-input type="text" v-model="ruleForm2.shenfenzheng"></el-input>
      </el-form-item>
      <h2>亲属信息</h2>
      <el-form-item label="关系">
        <el-input type="text" v-model="ruleForm2.guanxi"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input type="text" v-model="ruleForm2.xingming"></el-input>
      </el-form-item>
      <el-form-item label="工作学习单位">
        <el-input type="text" v-model="ruleForm2.danwei"></el-input>
      </el-form-item>
      <el-form-item label="职务">
        <el-input type="text" v-model="ruleForm2.zhiwei"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input type="text" v-model="ruleForm2.dianhua"></el-input>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Axios from "axios";
import moment from "moment";
import portrait from "./portrait";
export default {
  created() {
    this.getCity();
    this.getDoctor();
  },
  components: {
    portrait
  },
  data() {
    var validateName = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入姓名"));
      } else {
        callback();
      }
    };
    // 入职验证
    var validateRuzhi = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请选择入职时间"));
      } else {
        callback();
      }
    };
    // 岗位验证
    var validateGangwei = (rule, value, callback) => {
      if (value == null) {
        callback(new Error("请选择岗位"));
      } else {
        callback();
      }
    };
    var checkRegion = (rule, value, callback) => {
      if (value == null) {
        callback(new Error("请选择地区"));
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入手机号"));
      }
      setTimeout(() => {
        if (!/((0\d{2,3}-\d{7,8})|(^1[3456789]\d{9}$))$/.test(value)) {
          callback(new Error("请输入座机号或者手机号"));
        } else {
          callback();
        }
      }, 500);
    };
    return {
      rules2: {
        staffName: [{ validator: validateName, trigger: "blur" }],
        phone: [{ validator: checkPhone, trigger: "blur" }],
        huji: [{ validator: checkRegion, trigger: "blur" }],
        jiguan: [{ validator: checkRegion, trigger: "blur" }],
        ruzhi: [{ validator: validateRuzhi, trigger: "blur" }],
        gangwei: [{ validator: validateGangwei, trigger: "blur" }]
      },
      ruleForm2: {
        // 员工名称
        staffName: "",
        // 年龄
        age: "",
        // 性别
        sex: 1,
        // 电话
        phone: "",
        // 生日
        shengri: "",
        // 血型
        xuexing: "",
        // 星座
        xingzuo: "",
        // 身高
        height: "",
        // 体重(KG)
        weight: "",
        // 健康状况
        jiankangzhuangkuang: "",
        // 疾病史
        bingli: "无",
        // 最高学历
        xueli: "",
        // 毕业院校
        biyeyuanxiao: "",
        // 所学专业
        zhuanye: "",
        // 特长
        techang: "",
        // 爱好
        aihao: "",
        // 身份证号
        shenfenzheng: "",
        // 民族
        minzu: "",
        // 政治面貌
        zhengzhimianmao: "",
        // 籍贯
        jiguan: null,
        jiguantext: null,
        // 户籍
        huji: null,
        // 现住址
        zhuzhi: "",
        // 出生日期
        chusheng: "",
        // 住房
        zhufang: "",
        // 婚育
        hunyu: "",
        // 驾照
        jiazhao: "",
        // 护照
        huzhao: "",
        // 退伍证
        tuiwuzheng: "",
        // 中心店面
        dianmian: "",
        // 岗位
        gangwei: null,
        // 职务
        zhiwu: "",
        // 待遇等级
        daiyu: "",
        // 入职日期
        ruzhi: "",
        // 关系
        guanxi: "",
        // 姓名
        xingming: "",
        // 工作学习单位
        danwei: "",
        // 职位职务
        zhiwei: "",
        // 联系电话
        dianhua: "",
        status: "",
        imgUrl: ""
      },
      // 血型集合
      xuexingList: [],
      // 星座集合
      xingzuoLsit: [],
      // 政治面貌
      zhengzhimianmaoList: [],
      // 在职状态
      statusList: [],
      // 城市列表
      city: [],
      // 健康状况
      jiankangzhuangkuangLsit: [],
      // 是否有房
      zhufangList: [],
      // 学历
      xueliList: [],
      // 民族
      minzuList: [],
      // 婚育
      hunyuList: [],
      // 驾照
      jiazhaoList: [],
      // 退伍证
      tuiwuzhengList: [],
      // 岗位
      gangweiList: []
    };
  },
  methods: {
    // 出生日期改变
    changeTime() {
      // 自动填写年龄
      if(this.ruleForm2.chusheng){
      this.ruleForm2.age =
        this.base.dateFtt("yyyy", new Date()) -
        this.base.dateFtt("yyyy", this.ruleForm2.chusheng);
      }
    },
    // 获取静态数据
    getDoctor() {
      Axios.get("/static/data/staff.json").then(res => {
        this.statusList = res.data.statusList;
        this.xuexingList = res.data.xuexingList;
        this.xingzuoLsit = res.data.xingzuoLsit;
        this.zhengzhimianmaoList = res.data.zhengzhimianmaoList;
        this.xueliList = res.data.xueliList;
        this.jiankangzhuangkuangLsit = res.data.jiankangzhuangkuangLsit;
        this.zhufangList = res.data.zhufangList;
        this.minzuList = res.data.minzuList;
        this.hunyuList = res.data.hunyuList;
        this.tuiwuzhengList = res.data.tuiwuzhengList;
        this.gangweiList = res.data.gangweiList;
        this.jiazhaoList = res.data.jiazhaoList;
      });
    },
    getCity() {
      // 获取城市列表
      Axios.get("/static/data/city.json").then(res => {
        this.city = res.data.info;
      });
    },
    success(msg) {
      this.$message({
        message: msg,
        type: "success"
      });
    },
    fault(msg) {
      this.$message.error(msg);
    },
    // 提交员工信息
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var that = this;
          // 现住址格式化
          this.ruleForm2.zhuzhi = ` ${this.$refs.hujibox.currentLabels.join(
            "/"
          )}/${this.ruleForm2.zhuzhi}`;
          // 籍贯格式化
          this.ruleForm2.jiguantext = this.$refs.jiguanbox.currentLabels.join(
            "/"
          );
          // 入职日期格式化
          this.ruleForm2.ruzhi = moment(this.ruleForm2.ruzhi ).format("YYYY-MM-DD");

          // 出生日期格式化
          this.ruleForm2.chusheng = moment(this.ruleForm2.chusheng ).format("YYYY-MM-DD");

          Axios.post("api/staff/create", this.ruleForm2)
            .then(function(response) {
              if (response.data.status == 1) {
                that.success(response.data.msg);
                that.$router.push({path:"/staff/status"})
              } else {
                that.fault(response.data.msg);
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        } else {
          this.fault("请输入标红的内容");
          return false;
        }
      });
    },
    getUrl(data) {
      this.ruleForm2.imgUrl = data;
    }
  }
};
</script>

<style lang="stylus" scoped>
form {
  width: 600px;
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    justify-content: space-around;
    width: 299px;
  }

  .textarea {
    width: 600px;
  }

  .btn {
    width: 100%;
  }

  h2 {
    font-size: 18px;
    width: 100%;
    margin: 10px 0 26px 0;
  }
}

.el-date-editor {
  width: 199px !important;
}
</style>
